<template>
	<view class="cancle-account-page">
		<view class="cancle-account-tite">
			<text>账号注销后</text>
			<text>以下信息将被清空且无法找回</text>
		</view>
		<view class="account-tips">
			<view class="tips-one">
				<view class="pointer"></view>
				<text>该账号的全部个人资料和历史消息将无法找回</text>
			</view>
			<view class="tips-two">
				<view class="pointer"></view>
				<text>该账号粉丝将无法通过账号找到您或联系您</text>
			</view>
			<view class="tips-three">
				<view class="pointer"></view>
				<text>该账号下数字藏品、虚拟道具都将被清空，且无法恢复</text>
			</view>
			<view class="tips-four">
				<view class="pointer"></view>
				<text>任何你获得的权限都将作废且无法恢复</text>
			</view>
		</view>
		<u-button text="我已知晓,下一步" color="#FF3D3D" shape="circle" @click="showPopup"></u-button>
		<popup :title="popupName"  cancel="我再想想"  ensure="确认注销" ref="popupRef" @reserved="reserved"></popup>
	</view>
</template>
<script>
	import {
		deleteUser
	} from "@/api/user.js"
	import popup from './common/popup.vue'
	import { mapMutations } from 'vuex'
	export default {
		components: {
			popup
		},
		data() {
			return {
				popupName: ''
			}
		},
		methods: {
			...mapMutations(['setUserInfo','setUserToken']),
			showPopup() {
				this.$refs.popupRef.open()
				this.popupName = '注销后该账号藏品等其他虚拟物品全部消失，是否确认注销？'
			},
			reserved(){
				this.$refs.popupRef.close()
				uni.showLoading()
				this.onDeleteUser();
			},
			async onDeleteUser(){
				try{
					const res = await deleteUser({})
					this.setUserInfo('')
					this.setUserToken('')
					uni.showToast({
						title:'注销成功，即将返回登录~',
						icon:'none',
						success() {
							setTimeout(()=>{
								uni.redirectTo({
									url:'./login'
								})
							}, 2000)
						}
					})
				}catch(e){
					console.log(e)
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.cancle-account-page {
		padding: 0 40rpx;

		.cancle-account-tite {
			padding: 150rpx 130rpx 60rpx 130rpx;

			text {
				text-align: center;
				display: block;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				;
			}

			text:first-child {
				margin-bottom: 17rpx;
			}

		}

		.account-tips {
			height: 344rpx;
			background-color: #EEF4F9;
			border-radius: 10rpx;
			padding: 50rpx 40rpx 10rpx;
			margin-bottom: 60rpx;
			.tips-one,
			.tips-two,
			.tips-three,
			.tips-four {
				display: flex;
				margin-bottom: 40rpx;
				.pointer::before{
					width: 10rpx;
					height: 10rpx;
					background-color: #BAC6D0;
					display: inline-block;
					content: '';
					border-radius: 50%;
					margin-bottom: 12rpx;
					margin-right: 17rpx;
				}
				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #6A7075;
				}
			}
		}
		::v-deep .popup-box{
			width: 510rpx;
 		}
		::v-deep .popup-box .popup-bottom .popup-bottom-left{
			background-color: #000000;
			color: #FFFFFF;
		}
		::v-deep .popup-box .popup-bottom .popup-bottom-right{
			background-color: #FF3D3D;
		}
	}
</style>
